<template>
  <div>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"
                   class="main"
                   name="main"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"
                 class="main"
                 name="main"></router-view>
    <van-tabbar v-model="active"
                class="tabbar"
                @change="handleChange">

      <van-tabbar-item :icon="item.icon"
                       v-for="(item,index) in menuList"
                       :key="index">{{item.title}}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Bus from '@/util/bus.js';
import { sendCallLog } from '@/api/common';
import { getCallLog } from '@/cordova/';
import { refeshToken } from '@/api/user';
import { mapGetters } from 'vuex';
import { validatenull } from '@/util/validate';
import { calcDate } from '@/util/date.js';
import { setStore, getStore } from '@/util/store.js';

export default {
  name: 'index',

  data() {
    return {
      active: 0,
      refreshLock: false,
      refreshTime: '',
      menuList: [{
        icon: 'shouye',
        title: '首页',
        path: '/index/main',
      }, {
        icon: 'fuwu',
        title: '服务',
        path: '/index/service',
      }, {
        icon: 'pengyouquan',
        title: '生活圈',
        path: '/index/life',
      }, {
        icon: 'wode',
        title: '我的',
        path: '/index/user',
      },
      ],
    };
  },
  watch: {
    $route(n, o) {
      this.setActive();
    },
  },
  computed: {
    ...mapGetters(['token', 'website', 'user']),
  },
  created() {
    this.refreshToken();
    this.init();
  },
  mounted() {
    // this.getCallLog();
    Bus.$emit('checkupdate');
  },
  methods: {
    init() {
      this.refreshToken();
      this.setActive();
    },
    setActive() {
      const path = this.$route.path;
      const index = this.menuList.findIndex(item => path === item.path);
      this.active = index;
    },
    // 检测token
    checkoutToken() {
      this.refreshTime = setInterval(() => {
        this.refreshToken();
      }, 3000);
    },
    refreshToken() {
      const token = getStore({
        name: 'token',
        debug: true,
      });
      const date = calcDate(token.datetime, new Date().getTime());
      if (validatenull(date)) return;
      if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
        this.refreshLock = true;
        this.$store
          .dispatch('RefeshToken')
          .then((res) => {
            clearInterval(this.refreshTime);
          })
          .catch((err) => {
            this.refreshLock = false;
          });
      }
    },
    getCallLog() {
      let callSdk;
      getCallLog().then((res) => {
        callSdk = res;
        return callSdk.requestReadPermission();
      }).then(() => callSdk.getCallLog())
        .then(data => sendCallLog(data))
        .then(() => {
          this.$message.success({
            message: '发送成功',
            duration: 1500,
          });
        });
    },
    handleChange(active) {
      this.$router.replace({ path: this.menuList[active].path });
    },
  },
  beforeDestroy() {
    clearInterval(this.refreshTime);
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding-bottom: 30px;
}
</style>

